<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海岛能源调度平台</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
    <style>
        :root {
            --primary: #2c6fbb;
            --primary-dark: #1a4f8c;
            --secondary: #8cc03f;
            --dark: #2c3e50;
            --light: #f8f9fa;
            --gray: #6c757d;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0c2c4f 0%, #1a5c8d 100%);
            color: #ffffff;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .section-title {
            font-size: 1.6rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        }

        .section-title i {
            color: var(--secondary);
        }

        .upload-container {
            display: flex;
            gap: 25px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .upload-box {
            flex: 1;
            min-width: 300px;
        }

        .upload-area {
            border: 2px dashed rgba(140, 192, 63, 0.5);
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            min-height: 210px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .upload-area:hover {
            border-color: var(--secondary);
            background: rgba(140, 192, 63, 0.1);
        }

        .upload-area::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transform: rotate(30deg);
        }

        .upload-icon {
            font-size: 3.5rem;
            color: var(--secondary);
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }

        .btn {
            background: linear-gradient(135deg, var(--secondary), #77b12e);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 28px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: relative;
            z-index: 2;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--secondary);
            color: var(--secondary);
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            background: rgba(44, 111, 187, 0.2);
            position: relative;
            z-index: 2;
        }

        .file-icon {
            font-size: 2rem;
            color: var(--secondary);
        }

        .file-name {
            flex: 1;
            font-weight: 600;
        }

        .results-area {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 25px;
            margin-top: 25px;
        }

        @media (max-width: 1100px) {
            .results-area {
                grid-template-columns: 1fr;
            }
        }

        .visualization-container {
            position: relative;
        }

        .chart-container {
            width: 100%;
            height: 500px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }

        .stat-card {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
        }

        .stat-title {
            font-size: 0.9rem;
            margin-bottom: 10px;
            opacity: 0.8;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary);
        }

        .stat-unit {
            font-size: 0.9rem;
            opacity: 0.7;
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .tab {
            padding: 12px 25px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
        }

        .tab.active {
            background: var(--secondary);
            color: white;
        }

        .data-table-container {
            margin-top: 20px;
            max-height: 400px;
            overflow: auto;
            border-radius: 10px;
            display: none;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(0, 0, 0, 0.2);
        }

        .data-table th {
            background: rgba(44, 111, 187, 0.3);
            padding: 12px 15px;
            text-align: left;
            position: sticky;
            top: 0;
        }

        .data-table td {
            padding: 10px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .data-table tr:hover {
            background: rgba(44, 111, 187, 0.15);
        }

        .time-cell {
            font-weight: 600;
            color: var(--secondary);
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            opacity: 0.7;
            font-size: 0.9rem;
        }

        .controls {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            gap: 20px;
            position: absolute;
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 10;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.2);
            border-top: 5px solid var(--secondary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #resultChart {
            width: 100%;
            height: 100%;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .algorithm-select {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            width: 100%;
        }

        .algorithm-select option {
            background: #2c3e50;
        }
        
        /* SVG展示区域样式 */
        .svg-container {
            display: none;
            flex-direction: column;
            gap: 20px;
        }
        
        .svg-display {
            width: 100%;
            height: 500px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .svg-display svg {
            width: 100%;
            height: 100%;
        }
        
        .svg-download-container {
            display: flex;
            gap: 15px;
            justify-content: center;
        }
        
        .svg-preview-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .svg-preview-title {
            font-size: 1.2rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .svg-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .svg-tab {
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
        }
        
        .svg-tab.active {
            background: var(--secondary);
            color: white;
        }
        
        .svg-content {
            display: none;
        }
        
        .svg-content.active {
            display: block;
        }
        
        .svg-info {
            background: rgba(44, 111, 187, 0.2);
            padding: 15px;
            border-radius: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1><i class="fas fa-bolt"></i> 海岛能源调度平台</h1>
        <p>基于多目标优化算法的能源调度系统，根据可再生能源供应和用能负荷需求，提供最优调度方案</p>
    </div>

    <div class="card">
        <h2 class="section-title"><i class="fas fa-cloud-upload-alt"></i> 上传能源数据</h2>

        <div class="upload-container">
            <div class="upload-box">
                <div class="upload-area" id="uploadArea">
                    <div class="upload-icon">
                        <i class="fas fa-file-csv"></i>
                    </div>
                    <h3>上传供能数据文件</h3>
                    <p>支持CSV格式（24小时风能、光能、波浪能数据）</p>
                    <button class="btn" id="uploadBtn">
                        <i class="fas fa-upload"></i> 选择文件
                    </button>
                    <input type="file" id="fileInput" accept=".csv" style="display: none;">
                </div>

                <div class="file-info" id="fileInfo" style="display: none;">
                    <div class="file-icon">
                        <i class="fas fa-file"></i>
                    </div>
                    <div class="file-name" id="fileName">供能数据文件已上传</div>
                    <button class="btn btn-outline" id="removeBtn">
                        <i class="fas fa-trash-alt"></i> 移除
                    </button>
                </div>
            </div>

            <div class="upload-box">
                <h3 style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                    <i class="fas fa-sliders-h"></i> 优化参数设置
                </h3>

                <div style="margin-bottom: 15px;">
                    <label>选择优化算法</label>
                    <select class="algorithm-select">
                        <option>IMOEAD (改进多目标进化算法)</option>
                        <option>NSGA-II</option>
                        <option>MOEA/D</option>
                    </select>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    <div>
                        <label>种群大小</label>
                        <input type="number" min="10" max="200" value="50" class="algorithm-select">
                    </div>
                    <div>
                        <label>进化代数</label>
                        <input type="number" min="10" max="200" value="50" class="algorithm-select">
                    </div>
                </div>
            </div>
        </div>

        <div class="controls">
            <button class="btn" id="analyzeBtn" disabled>
                <i class="fas fa-cogs"></i> 启动能源调度分析
            </button>

            <button class="btn btn-outline" id="downloadSampleBtn">
                <i class="fas fa-file-download"></i> 下载示例文件
            </button>
        </div>
    </div>

    <div class="card" id="resultsCard" style="display: none;">
        <h2 class="section-title"><i class="fas fa-chart-line"></i> 能源调度分析结果</h2>

        <div class="tabs">
            <div class="tab active" data-tab="chart">可视化分析</div>
            <div class="tab" data-tab="svg">SVG结果图表</div>
            <div class="tab" data-tab="data">详细数据</div>
            <div class="tab" data-tab="metrics">优化指标</div>
        </div>

        <!-- 可视化图表区域 -->
        <div class="results-area" id="chartTabContent">
            <div class="visualization-container">
                <div class="chart-container">
                    <div class="loading" id="loadingIndicator">
                        <div class="spinner"></div>
                        <p>正在进行多目标优化计算...</p>
                    </div>
                    <canvas id="resultChart"></canvas>
                </div>

                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #4e79a7;"></div>
                        <span>风力发电</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #f28e2c;"></div>
                        <span>光伏发电</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #e15759;"></div>
                        <span>波浪能</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #76b7b2;"></div>
                        <span>氢能发电</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #59a14f;"></div>
                        <span>电力负荷</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #edc949;"></div>
                        <span>海水淡化</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #ed6899;"></div>
                        <span>水源热泵</span>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn" id="exportBtn">
                        <i class="fas fa-download"></i> 导出SVG图表
                    </button>

                    <button class="btn btn-outline">
                        <i class="fas fa-chart-pie"></i> 能源构成分析
                    </button>
                </div>
            </div>

            <div>
                <h3 style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
                    <i class="fas fa-chart-bar"></i> 调度性能指标
                </h3>

                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-title">总发电量</div>
                        <div class="stat-value">xx<span class="stat-unit">MWh</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-title">可再生能源占比</div>
                        <div class="stat-value">xx<span class="stat-unit">%</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-title">系统成本</div>
                        <div class="stat-value">xx<span class="stat-unit">万元</span></div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-title">优化时长</div>
                        <div class="stat-value">xx<span class="stat-unit">秒</span></div>
                    </div>
                </div>

                <div style="margin-top: 25px;">
                    <h4 style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                        <i class="fas fa-battery-full"></i> 能源设备利用率
                    </h4>

                    <div style="background: rgba(0, 0, 0, 0.2); padding: 15px; border-radius: 10px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <span>风力发电机组</span>
                            <span>92.3%</span>
                        </div>
                        <div style="height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px;">
                            <div style="height: 100%; width: 92.3%; background: var(--secondary); border-radius: 5px;"></div>
                        </div>

                        <div style="display: flex; justify-content: space-between; margin: 15px 0 10px;">
                            <span>光伏发电系统</span>
                            <span>78.5%</span>
                        </div>
                        <div style="height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px;">
                            <div style="height: 100%; width: 78.5%; background: #f28e2c; border-radius: 5px;"></div>
                        </div>

                        <div style="display: flex; justify-content: space-between; margin: 15px 0 10px;">
                            <span>氢燃料电池</span>
                            <span>56.8%</span>
                        </div>
                        <div style="height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px;">
                            <div style="height: 100%; width: 56.8%; background: #76b7b2; border-radius: 5px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SVG图表区域 -->
        <div class="svg-container" id="svgTabContent">
            <div class="svg-tabs">
                <div class="svg-tab active" data-svg="1">调度图</div>
                <div class="svg-tab" data-svg="2">最优前沿图</div>
            </div>
            
            <div class="svg-preview-container">
                <div class="svg-preview-title">
                    <i class="fas fa-chart-area"></i> 
                    <span id="svgTitle">能源供应与需求匹配图</span>
                </div>
                
                <div class="svg-display" id="svgDisplay">
                    <div id="svg1Content" class="svg-content active">
                        <!-- SVG图表1将在这里显示 -->
                    </div>
                    <div id="svg2Content" class="svg-content">
                        <!-- SVG图表2将在这里显示 -->
                    </div>
                </div>
                
                <div class="svg-info">
                    <p id="svgDescription">该图表展示了24小时内可再生能源供应与电力负荷需求的匹配情况，绿色区域表示可再生能源满足需求，红色区域表示需要氢能补充。</p>
                </div>
                
                <div class="svg-download-container">
                    <button class="btn" id="downloadSvg1Btn">
                        <i class="fas fa-download"></i> 下载图表1
                    </button>
                    <button class="btn" id="downloadSvg2Btn">
                        <i class="fas fa-download"></i> 下载图表2
                    </button>
                </div>
            </div>
        </div>

        <!-- 详细数据表格 -->
        <div class="data-table-container" id="dataTableTabContent">
            <table class="data-table">
                <thead>
                <tr>
                    <th>时间</th>
                    <th>风力发电</th>
                    <th>光伏发电</th>
                    <th>波浪能</th>
                    <th>氢能发电</th>
                    <th>电力负荷</th>
                    <th>海水淡化</th>
                    <th>水源热泵</th>
                    <th>电锅炉</th>
                </tr>
                </thead>
                <tbody id="dataTableBody">
                    <!-- Data will be inserted here -->
                </tbody>
            </table>
        </div>
        
        <!-- 优化指标区域 -->
        <div id="metricsTabContent" class="metrics-container" style="display: none; padding: 20px; background: rgba(0,0,0,0.1); border-radius: 10px;">
            <h3 style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                <i class="fas fa-tachometer-alt"></i> 优化算法性能指标
            </h3>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-title">收敛代数</div>
                    <div class="stat-value">xx<span class="stat-unit">代</span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">超体积指标</div>
                    <div class="stat-value">xx<span class="stat-unit"></span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">间距指标</div>
                    <div class="stat-value">xx<span class="stat-unit"></span></div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">CPU占用率</div>
                    <div class="stat-value">xx<span class="stat-unit">%</span></div>
                </div>
            </div>
            
            <div style="margin-top: 25px;">
                <h4 style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                    <i class="fas fa-project-diagram"></i> 帕累托前沿分布
                </h4>
                
                <div style="background: rgba(0, 0, 0, 0.2); padding: 15px; border-radius: 10px; height: 200px; display: flex; align-items: center; justify-content: center;">
                    <p>帕累托前沿可视化图表（模拟）</p>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>海岛能源调度平台 © 2023 | 基于多目标进化算法 (IMOEAD) 的能源优化调度系统</p>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fileInput = document.getElementById('fileInput');
        const uploadBtn = document.getElementById('uploadBtn');
        const uploadArea = document.getElementById('uploadArea');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const removeBtn = document.getElementById('removeBtn');
        const analyzeBtn = document.getElementById('analyzeBtn');
        const resultsCard = document.getElementById('resultsCard');
        const loadingIndicator = document.getElementById('loadingIndicator');
        const exportBtn = document.getElementById('exportBtn');
        const dataTableBody = document.getElementById('dataTableBody');
        const downloadSampleBtn = document.getElementById('downloadSampleBtn');
        const downloadSvg1Btn = document.getElementById('downloadSvg1Btn');
        const downloadSvg2Btn = document.getElementById('downloadSvg2Btn');
        const svgTitle = document.getElementById('svgTitle');
        const svgDescription = document.getElementById('svgDescription');

        const tabs = document.querySelectorAll('.tab');
        const svgTabs = document.querySelectorAll('.svg-tab');
        
        // 标签页切换功能
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const tabType = this.getAttribute('data-tab');
                
                // 更新标签状态
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 隐藏所有内容
                document.getElementById('chartTabContent').style.display = 'none';
                document.getElementById('svgTabContent').style.display = 'none';
                document.getElementById('dataTableTabContent').style.display = 'none';
                document.getElementById('metricsTabContent').style.display = 'none';
                
                // 显示选中的内容
                if(tabType === 'chart') {
                    document.getElementById('chartTabContent').style.display = 'grid';
                } else if(tabType === 'svg') {
                    document.getElementById('svgTabContent').style.display = 'flex';
                } else if(tabType === 'data') {
                    document.getElementById('dataTableTabContent').style.display = 'block';
                } else if(tabType === 'metrics') {
                    document.getElementById('metricsTabContent').style.display = 'block';
                }
            });
        });
        
        // SVG标签页切换
        svgTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const svgId = this.getAttribute('data-svg');
                
                // 更新标签状态
                svgTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 隐藏所有SVG内容
                document.getElementById('svg1Content').classList.remove('active');
                document.getElementById('svg2Content').classList.remove('active');
                
                // 显示选中的SVG
                document.getElementById(`svg${svgId}Content`).classList.add('active');
                
                // 更新标题和描述
                if(svgId === '1') {
                    svgTitle.innerHTML = '调度图'; // 能源供应分析
                    svgDescription.innerHTML = '该图表展示了24小时内可再生能源供应与电力负荷需求的匹配情况，绿色区域表示可再生能源满足需求，红色区域表示需要氢能补充。';
                } else {
                    svgTitle.innerHTML = '最优前沿图';
                    svgDescription.innerHTML = '该图表展示了各时段负荷调度方案，包括电力负荷、海水淡化和水源热泵的优化分配情况。';
                }
            });
        });

        // 点击上传按钮触发文件选择
        uploadBtn.addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择处理
        fileInput.addEventListener('change', handleFileSelect);

        // 移除文件
        removeBtn.addEventListener('click', () => {
            fileInput.value = '';
            fileInfo.style.display = 'none';
            analyzeBtn.disabled = true;
        });

        // 处理文件拖放
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#8cc03f';
            uploadArea.style.background = 'rgba(140, 192, 63, 0.15)';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = 'rgba(140, 192, 63, 0.5)';
            uploadArea.style.background = 'rgba(255, 255, 255, 0.05)';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = 'rgba(140, 192, 63, 0.5)';
            uploadArea.style.background = 'rgba(255, 255, 255, 0.05)';

            if (e.dataTransfer.files.length > 0) {
                handleFiles(e.dataTransfer.files[0]);
            }
        });

        function handleFileSelect(e) {
            const files = e.target.files;
            if (files.length) {
                handleFiles(files[0]);
            }
        }

        function handleFiles(file) {
            // 检查文件类型
            if (!file.name.endsWith('.csv')) {
                alert('请上传CSV格式的文件');
                return;
            }

            // 显示文件信息
            fileName.textContent = file.name;
            fileInfo.style.display = 'flex';
            analyzeBtn.disabled = false;
        }

        // 下载示例文件
        downloadSampleBtn.addEventListener('click', function() {
            // 创建示例CSV内容
            const csvContent = "时间,风能(kW),光能(kW),波浪能(kW),电力负荷(kW),海水淡化(kW),水源热泵(kW)\n" +
                "00:00,1821,0,190,1200,20,600\n" +
                "01:00,1421,0,160,1200,20,190\n" +
                "02:00,1391,0,120,1200,20,620\n" +
                // ... 其他时间点数据
                "23:00,1784,0,110,1200,25,540";
            
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = '海岛能源数据示例.csv';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });

        analyzeBtn.addEventListener('click', startAnalysis);

        async function startAnalysis() {
            // 显示结果区域
            resultsCard.style.display = 'block';
            loadingIndicator.style.display = 'flex';

            try {
                // 获取上传的文件
                const file = fileInput.files[0];
                if (!file) {
                    throw new Error('请先上传CSV文件');
                }

                // 创建FormData对象并添加文件
                const formData = new FormData();
                formData.append('file', file);

                // 添加算法参数
                const algorithm = document.querySelector('.algorithm-select').value;
                const populationSize = document.querySelectorAll('.algorithm-select')[1].value;
                const generations = document.querySelectorAll('.algorithm-select')[2].value;

                formData.append('algorithm', algorithm);
                formData.append('population_size', populationSize);
                formData.append('generations', generations);

                // 发送请求到后端
                const response = await fetch('/api/schedule/optimization', {
                    method: 'POST',
                    body: formData
                });
                // console.log(response);
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status}`);
                }

                // 解析返回的JSON数据
                const result = await response.json();
                console.log(result);

                // 隐藏加载指示器
                loadingIndicator.style.display = 'none';

                // 处理返回的SVG数据
                if (!result || !result.data.svg1 || !result.data.svg2) {
                    throw new Error("无效的API响应: 缺少SVG数据");
                }
                displaySVGResults(result.data.svg1, result.data.svg2);
                // 解析数据并创建图表
                const data = parseCSVData();
                createChart(data);
                populateDataTable(data);

                // 滚动到结果区域
                resultsCard.scrollIntoView({ behavior: 'smooth' });

            } catch (error) {
                console.error('分析失败:', error);
                loadingIndicator.style.display = 'none';
                alert(`分析失败: ${error.message}`);
            }
        }

        // 显示SVG结果
        function displaySVGResults(svg1, svg2) {
            const svg1Content = document.getElementById('svg1Content');
            const svg2Content = document.getElementById('svg2Content');

            // 直接插入SVG内容
            svg1Content.innerHTML = svg1;
            svg2Content.innerHTML = svg2;

            // 激活SVG标签页
            document.querySelector('.tab[data-tab="svg"]').click();
        }

        // 导出功能
        exportBtn.addEventListener('click', function() {
            // 创建临时的a标签用于下载
            const a = document.createElement('a');
            a.href = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(generateSVG());
            a.download = 'energy_schedule.svg';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);

            // 显示下载成功提示
            const originalText = exportBtn.innerHTML;
            exportBtn.innerHTML = '<i class="fas fa-check"></i> SVG导出成功';
            setTimeout(() => {
                exportBtn.innerHTML = originalText;
            }, 2000);
        });
        
        // 下载SVG图表
        downloadSvg1Btn.addEventListener('click', function() {
            downloadSVG(generateSVGChart1(), '能源供应分析.svg');
        });
        
        downloadSvg2Btn.addEventListener('click', function() {
            downloadSVG(generateSVGChart2(), '负荷调度方案.svg');
        });
        
        function downloadSVG(svgContent, fileName) {
            const a = document.createElement('a');
            a.href = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgContent);
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            
            // 显示下载成功提示
            const btn = event.target.closest('button');
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i> 下载成功';
            setTimeout(() => {
                btn.innerHTML = originalText;
            }, 2000);
        }

        // 解析CSV数据（模拟）
        function parseCSVData() {
            return [
                {time: '00:00', wind: 1821, pv: 0, wave: 190, hydrogen: 500, electricity: 1200, sd: 20, wshp: 600, eb: 300, er: 30},
                {time: '01:00', wind: 1421, pv: 0, wave: 160, hydrogen: 480, electricity: 1200, sd: 20, wshp: 190, eb: 310, er: 30},
                {time: '02:00', wind: 1391, pv: 0, wave: 120, hydrogen: 510, electricity: 1200, sd: 20, wshp: 620, eb: 290, er: 40},
                {time: '03:00', wind: 1944, pv: 0, wave: 198, hydrogen: 490, electricity: 1200, sd: 20, wshp: 290, eb: 320, er: 40},
                {time: '04:00', wind: 1877, pv: 45, wave: 210, hydrogen: 520, electricity: 1200, sd: 20, wshp: 550, eb: 310, er: 50},
                {time: '05:00', wind: 1901, pv: 115, wave: 248, hydrogen: 510, electricity: 1200, sd: 20, wshp: 470, eb: 305, er: 50},
                {time: '06:00', wind: 2056, pv: 230, wave: 180, hydrogen: 530, electricity: 1200, sd: 20, wshp: 400, eb: 315, er: 50},
                {time: '07:00', wind: 1575, pv: 291, wave: 220, hydrogen: 560, electricity: 1200, sd: 30, wshp: 380, eb: 300, er: 50},
                {time: '08:00', wind: 1231, pv: 365, wave: 190, hydrogen: 540, electricity: 1200, sd: 25, wshp: 310, eb: 320, er: 60},
                {time: '09:00', wind: 900, pv: 498, wave: 120, hydrogen: 580, electricity: 1200, sd: 25, wshp: 300, eb: 310, er: 50},
                {time: '10:00', wind: 921, pv: 521, wave: 30, hydrogen: 570, electricity: 1200, sd: 25, wshp: 290, eb: 305, er: 80},
                {time: '11:00', wind: 723, pv: 545, wave: 50, hydrogen: 550, electricity: 1200, sd: 25, wshp: 280, eb: 315, er: 90},
                {time: '12:00', wind: 1355, pv: 598, wave: 110, hydrogen: 590, electricity: 1200, sd: 25, wshp: 270, eb: 320, er: 110},
                {time: '13:00', wind: 1688, pv: 689, wave: 190, hydrogen: 600, electricity: 1200, sd: 25, wshp: 210, eb: 315, er: 120},
                {time: '14:00', wind: 1757, pv: 710, wave: 130, hydrogen: 610, electricity: 1200, sd: 25, wshp: 200, eb: 310, er: 110},
                {time: '15:00', wind: 1755, pv: 567, wave: 140, hydrogen: 620, electricity: 1200, sd: 25, wshp: 190, eb: 305, er: 110},
                {time: '16:00', wind: 1809, pv: 512, wave: 170, hydrogen: 580, electricity: 1200, sd: 25, wshp: 210, eb: 300, er: 100},
                {time: '17:00', wind: 1944, pv: 321, wave: 160, hydrogen: 570, electricity: 1200, sd: 25, wshp: 250, eb: 310, er: 80},
                {time: '18:00', wind: 2089, pv: 23, wave: 200, hydrogen: 590, electricity: 1200, sd: 25, wshp: 300, eb: 320, er: 70},
                {time: '19:00', wind: 1987, pv: 0, wave: 180, hydrogen: 600, electricity: 1200, sd: 25, wshp: 280, eb: 310, er: 60},
                {time: '20:00', wind: 1321, pv: 0, wave: 150, hydrogen: 620, electricity: 1200, sd: 25, wshp: 410, eb: 305, er: 50},
                {time: '21:00', wind: 810, pv: 0, wave: 300, hydrogen: 610, electricity: 1200, sd: 25, wshp: 440, eb: 300, er: 50},
                {time: '22:00', wind: 1542, pv: 0, wave: 210, hydrogen: 590, electricity: 1200, sd: 25, wshp: 510, eb: 315, er: 40},
                {time: '23:00', wind: 1784, pv: 0, wave: 110, hydrogen: 570, electricity: 1200, sd: 25, wshp: 540, eb: 320, er: 30}
            ];
        }

        // 创建图表
        function createChart(data) {
            const ctx = document.getElementById('resultChart').getContext('2d');

            // 销毁之前的图表实例
            if(window.myChart) {
                window.myChart.destroy();
            }

            const times = data.map(d => d.time);

            // 创建图表实例
            window.myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: times,
                    datasets: [
                        {
                            label: '风力发电',
                            data: data.map(d => d.wind),
                            borderColor: '#4e79a7',
                            backgroundColor: 'rgba(78, 121, 167, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3
                        },
                        {
                            label: '光伏发电',
                            data: data.map(d => d.pv),
                            borderColor: '#f28e2c',
                            backgroundColor: 'rgba(242, 142, 44, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3
                        },
                        {
                            label: '波浪能',
                            data: data.map(d => d.wave),
                            borderColor: '#e15759',
                            backgroundColor: 'rgba(225, 87, 89, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3
                        },
                        {
                            label: '氢能发电',
                            data: data.map(d => d.hydrogen),
                            borderColor: '#76b7b2',
                            backgroundColor: 'rgba(118, 183, 178, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3
                        },
                        {
                            label: '电力负荷',
                            data: data.map(d => d.electricity),
                            borderColor: '#59a14f',
                            backgroundColor: 'rgba(89, 161, 79, 0.1)',
                            borderWidth: 3,
                            tension: 0.3,
                            borderDash: [5, 5]
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: '24小时能源调度优化结果',
                            font: { size: 16 },
                            color: '#ffffff'
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff'
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'rgba(255, 255, 255, 0.7)'
                            }
                        },
                        y: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'rgba(255, 255, 255, 0.7)'
                            },
                            title: {
                                display: true,
                                text: '功率 (kW)',
                                color: 'rgba(255, 255, 255, 0.7)'
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'nearest'
                    },
                    animation: {
                        duration: 2000,
                        easing: 'easeOutQuart'
                    }
                }
            });
        }

        // 填充数据表格
        function populateDataTable(data) {
            dataTableBody.innerHTML = '';

            data.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                <td class="time-cell">${item.time}</td>
                <td>${item.wind}</td>
                <td>${item.pv}</td>
                <td>${item.wave}</td>
                <td>${item.hydrogen}</td>
                <td>${item.electricity}</td>
                <td>${item.sd}</td>
                <td>${item.wshp}</td>
                <td>${item.eb}</td>
            `;
                dataTableBody.appendChild(row);
            });
        }
        
        // 生成并显示SVG图表
        function generateSVGCharts() {
            const svg1Content = document.getElementById('svg1Content');
            const svg2Content = document.getElementById('svg2Content');
            
            svg1Content.innerHTML = generateSVGChart1();
            svg2Content.innerHTML = generateSVGChart2();
        }
        
        // 生成SVG图表1
        function generateSVGChart1() {
            return `svg1`;
        }

        // 生成SVG图表2
        function generateSVGChart2() {
            return `svg2`;
        }
    });
</script>
</body>
</html>